<template>
  <rx-layout>
    <div slot="center">
        <rx-fit :isheader="isheader">
          <div slot="toolheader" border="false" foldbtn="false" >
            <div class="table-operator">
              <a-button  type="primary" icon="plus" @click="add">{{$ti18('rxList.newBtn','新建')}}</a-button>

            </div>
            <span class="search-btn-box" v-if="!isheader">
            <span class="search-btn" @click.stop="searchshow"><i class="iconfont iconguolv"></i>{{$ti18('rxList.leachBtn','过滤')}}</span>
          </span>
          </div>
          <div  btnalign="right"  slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel" @close="closeSearchbar">
            <a-form :layout="colLayout">
              <a-row :gutter="24">
                <a-col :span="colSpan">
             <a-form-item :label="i18n('form.name','名称')">
                      <a-input :placeholder="i18n('form.name','名称','input')" v-model="queryParam.Q_name__S_LK" style="width: 100%;"/>
                    </a-form-item>
                </a-col>
                <a-col :span="colSpan">
             <a-form-item :label="i18n('form.key','标识Key')">
                      <a-input :placeholder="i18n('form.key','标识Key','input')" v-model="queryParam.Q_key__S_LK" />
                    </a-form-item>
                </a-col>
                <a-col :span="colSpan">
             <a-form-item :label="i18n('form.desc','描述')">
                        <a-input :placeholder="i18n('form.desc','描述','input')" v-model="queryParam.Q_descp__S_LK" />
                      </a-form-item>
                </a-col>
              </a-row>
          </a-form>
          </div>
          <rx-grid
            ref="table"
            :bordered="isBorder"
            :multiSelect="true"
            :columns="columns"
            :defaultPageSize="10"
            url="/api-system/system/core/sysTreeCat/query"
            :queryParam="queryParam"
            data-field="result.data"
            :pageSizeOptions="['10','30','40']"
            id-field="catId"
            @selectChange="onSelectChange"
          >
              <span slot="name" slot-scope="{ text, record }">
                 <span>{{ $i18(text,'分类名称') }}</span>
              </span>
            <span slot="action" slot-scope="{ text, record }" class="actionIcons">
              <span v-if="editEnable" @click.stop="edit(record)">{{$ti18('rxList.editBtn','编辑')}}</span>
              <span v-if="removeEnable" @click.stop="delByIds([record.catId])">{{$ti18('rxList.delBtn','删除')}}</span>
            </span>
          </rx-grid>
        </rx-fit>
    </div>
  </rx-layout>
</template>

<script>
import SysTreeCatApi from '@/api/system/core/sysTreeCat'
import SysTreeCatEdit from './SysTreeCatEdit'
import { BaseList, RxLayout,RxFit } from "@lowcode/jpaas-common-lib"
export default {
  name: 'SysTreeCatList',
  mixins: [BaseList],
  components: {
    SysTreeCatEdit,
    RxLayout,
    RxFit
  },
  data() {
    return {
      form: this.$form.createForm(this),
      queryParam: {},

      // 表头
      columns: [
        {
          title: '#',
          type:'indexColumn',
          dataIndex:'serial',
          width:80,
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: this.i18n('form.name','名称'),
          dataIndex: 'name',
          width:120,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: this.i18n('form.key','标识Key'),
          dataIndex: 'key',
          width:120,
        },
        {
          title: this.i18n('form.sn','序号'),
          dataIndex: 'sn',
          width:120,
        },
        {
          title: this.i18n('form.desc','描述'),
          dataIndex: 'descp',
          width:120,
        },
        {
          title: this.$ti18('rxList.action','操作'),
          dataIndex: 'action',
          width:60,
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      component: SysTreeCatEdit,
      comment: this.i18n('list.comment','系统分类'),
      widthHeight: ['800px', '500px'],
      selectedRowKeys: [],
      selectedRows: [],
    }
  },
  filters: {},
  created() {},
  methods: {
    i18n(name,text,key){
        return this.$ti18(name,text,"SysTreeCat",key);
    },
    //一开始调用数据
    getListByParams(parameter) {
      return SysTreeCatApi.query(parameter)
    },
    // 删除
    delById(ids) {
      return SysTreeCatApi.del({ ids: ids.join(',') })
    },
     search(){
         this.$refs.table.loadData();
      },
      cancel(){
        this.resetSearch();
      },
    closeSearchbar(){
      //关闭过滤弹窗；（点击X触发）
      this.fitSearch = false ;
    },
  }
}
</script>
<style scoped>

.ant-form-inline .ant-form-item{
  display: flex;
}

</style>
